@import (reference) "@{cosyless}";
.mod-mBox{
    margin-right: 330px;
    height:100%;
    position: relative;
    .mBox-item{
        float: left;
        width:50%;
        margin-bottom: 15px;
        .mi-mod{
            margin-right: 15px;
            background: #fff;
            height:100%;
        }
        .mi-hd{
            height:100px;
            position: relative;
            border-bottom: 1px dashed #d7d7d7;
            h2{
                font-weight: normal;
                color: #88a2f0;
                font-size: 15px;
                padding: 10px 0 10px 15px;
                height:25px;
                line-height:25px;
                a{
                    color: #ff6768;
                    display: inline-block;
                    vertical-align: middle;
                    border: 1px solid #ffb0b0;
                    padding: 0 8px;
                    line-height:20px;
                    height:20px;
                    font-size: 13px;
                    border-radius: 20px;
                    margin:-2px 0 0 4px;
                    &:hover{
                        background: #ffb0b0;
                        color: #fff;
                    }
                }
            }
            .mih-right{
                position: absolute;
                top:0;
                right:10px;
                width: 66px;
                height:36px;
                span{
                    position: absolute;
                    width: 66px;
                    height: 66px;
                    line-height:66px;
                    z-index:2;
                    text-align: center;
                    color: inherit;
                    .fui-font{
                        font-size: 3rem;
                        color: inherit;
                    }
                }
                &:after{
                    background: inherit;
                    content: '';
                    position: absolute;
                    width:66px;
                    height:66px;
                    bottom:-33px;
                    left:0;
                    border-radius: 50%;
                }
                &.mi-color-1{
                    background: #e8f8ed;
                    color: #89e2c2;
                }
                &.mi-color-2{
                    background: #ffefd2;
                    color: #ffc395;
                }
                &.mi-color-3{
                    background: #edf7ff;
                    color: #85bafa;
                }
                &.mi-color-4{
                    background: #ffeded;
                    color: #ff9db1;
                }
                &.mi-color-5{
                    background: #e8f8ed;
                    color: #95e5c6;
                }
                &.mi-color-6{
                    background: #ffefd2;
                    color: #ffc395;
                }
                &.mi-color-7{
                    background: #edf7ff;
                    color: #85bafa;
                }
                &.mi-color-8{
                    background: #ffefd2;
                    color: #ffc395;
                }
                &.mi-color-9{
                    background: #ffeded;
                    color: #ff9db1;
                }
            }
            .mi-nBox{
                display: inline-block;
                height:55px;
                position: relative;
                padding:0 20px 0 15px;
                .min-dw{
                    color: #b1b0b0;
                    position: absolute;
                    bottom:10px;
                    line-height:18px;
                    font-size: 12px;
                    right:0;
                }
                .min-num{
                    color: #596b88;
                    line-height:55px;
                    font-size: 40px;
                }
            }
        }
        .mi-bd{
            padding: 0 15px 30px;
            min-height: 160px;
            position: relative;
            .mi-list{
                margin-left: 10px;
                border-left:1px solid #e0e0e0;
                padding: 12px 0 12px 15px;
                li{
                    position: relative;
                    height:24px;
                    padding: 5px 0;
                    line-height:24px;
                    color: #908f8f;
                    font-size: 12px;
                    .mi-txt{
                        .text-overflow-nowrap-ellipsis();
                    }
                    .mi-red{
                        color: #ff6060;
                        padding: 0 5px;
                    }
                    .mi-btn{
                        color: #ff6768;
                        float: right;
                        border: 1px solid #ffb0b0;
                        padding: 0 10px;
                        line-height:20px;
                        height:20px;
                        font-size: 13px;
                        border-radius: 20px;
                        &:hover{
                            background: #ffb0b0;
                            color: #fff;
                        }
                    }
                    &:before{
                        content: '';
                        position: absolute;
                        width:8px;
                        height:8px;
                        border: 2px solid #e0e0e0;
                        border-radius: 50%;
                        background: #fff;
                        left:-22px;
                        top:50%;
                        margin-top: -5px;
                        box-shadow: 0 0 0 4px #fff;
                    }
                    &:hover{
                        &:before{
                            border-color: #ffb0b0;
                        }
                    }
                }
            }
            .mi-tips{
                position: absolute;
                left:0;
                bottom:15px;
                box-sizing: border-box;
                width:100%;
                padding: 0 15px 0 25px;
                line-height:16px;
                color: #bcbcbc;
                font-size: 12px;
            }
            .mib-text{
                color: #908f8f;
                font-size: 13px;
                line-height:24px;
                padding: 25px 20px 10px;
                .mi-red{
                    color: #ff6060;
                }
            }
        }
    }
    .mBox-scroll{
        display: none;
        height:100%;
        &.box-show{
            display: block;
        }
    }
    .mBox-nav{
        position: absolute;
        bottom:-15px;
        text-align: center;
        width:120px;
        left:50%;
        margin-left: -60px;
        height:10px;
        line-height:10px;
        span{
            width:10px;
            height:10px;
            vertical-align: middle;
            background: #afafaf;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
            &.active{
                background: #03a9f4;
            }
        }
    }
}







